<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音图</title>
<link rel="stylesheet" href="css/release/screen-dist.css">
</head>

<body>
<!--aplayer-->
	<div id="aplayer"></div>
	<ul>
		<li class="title-li radius-top">
			<span>平假名</span>
			<span>片假名</span>
			<span>罗马音</span>
		</li>
<!--第一行-->
		<li id="a">
			<span>あ</span>
			<span>ア</span>
			<span>a</span>
		</li>
		<li id="i">
			<span>い</span>
			<span>イ</span>
			<span>i</span>
		</li>
		<li id="u">
			<span>う</span>
			<span>ウ</span>
			<span>u</span>
		</li>
		<li id="e">
			<span>え</span>
			<span>エ</span>
			<span>e</span>
		</li>
		<li id="o" class="radius-bottom">
			<span>お</span>
			<span>オ</span>
			<span>o</span>
		</li>
<!--第二行-->
		<li class="null-li"></li>
		<li id="ka" class="radius-top">
			<span>か</span>
			<span>カ</span>
			<span>ka</span>
		</li>
		<li id="ki">
			<span>き</span>
			<span>キ</span>
			<span>ki</span>
		</li>
		<li id="ku">
			<span>く</span>
			<span>ク</span>
			<span>ku</span>
		</li>
		<li id="ke">
			<span>け</span>
			<span>ケ</span>
			<span>ke</span>
		</li>
		<li id="ko" class="radius-bottom">
			<span>こ</span>
			<span>コ</span>
			<span>ko</span>
		</li>
<!--第三行-->
		<li class="null-li"></li>
		<li id="sa" class="radius-top">
			<span>さ</span>
			<span>サ</span>
			<span>sa</span>
		</li>
		<li id="si">
			<span>し</span>
			<span>シ</span>
			<span>si</span>
		</li>
		<li id="su">
			<span>す</span>
			<span>ス</span>
			<span>su</span>
		</li>
		<li id="se">
			<span>せ</span>
			<span>セ</span>
			<span>se</span>
		</li>
		<li id="so" class="radius-bottom">
			<span>そ</span>
			<span>ソ</span>
			<span>so</span>
		</li>
<!--第四行-->
		<li class="null-li"></li>
		<li id="ta" class="radius-top">
			<span>た</span>
			<span>タ</span>
			<span>ta</span>
		</li>
		<li id="ti">
			<span>ち</span>
			<span>チ</span>
			<span>ti</span>
		</li>
		<li id="tu">
			<span>つ</span>
			<span>ツ</span>
			<span>tu</span>
		</li>
		<li id="te">
			<span>て</span>
			<span>テ</span>
			<span>te</span>
		</li>
		<li id="to" class="radius-bottom">
			<span>と</span>
			<span>ト</span>
			<span>to</span>
		</li>
<!--第五行-->
		<li class="null-li"></li>
		<li id="na" class="radius-top">
			<span>な</span>
			<span>ナ</span>
			<span>na</span>
		</li>
		<li id="ni">
			<span>に</span>
			<span>ニ</span>
			<span>ni</span>
		</li>
		<li id="nu">
			<span>ぬ</span>
			<span>ヌ</span>
			<span>nu</span>
		</li>
		<li id="ne">
			<span>ね</span>
			<span>ネ</span>
			<span>ne</span>
		</li>
		<li id="no" class="radius-bottom">
			<span>の</span>
			<span>ノ</span>
			<span>no</span>
		</li>
<!--第六行-->
		<li class="null-li"></li>
		<li id="ha" class="radius-top">
			<span>は</span>
			<span>ハ</span>
			<span>ha</span>
		</li>
		<li id="hi">
			<span>ひ</span>
			<span>ヒ</span>
			<span>hi</span>
		</li>
		<li id="hu">
			<span>ふ</span>
			<span>フ</span>
			<span>hu</span>
		</li>
		<li id="he">
			<span>へ</span>
			<span>ヘ</span>
			<span>he</span>
		</li>
		<li id="ho" class="radius-bottom">
			<span>ほ</span>
			<span>ホ</span>
			<span>ho</span>
		</li>
<!--第七行-->
		<li class="null-li"></li>
		<li id="ma" class="radius-top">
			<span>ま</span>
			<span>マ</span>
			<span>ma</span>
		</li>
		<li id="mi">
			<span>み</span>
			<span>ミ</span>
			<span>mi</span>
		</li>
		<li id="mu">
			<span>む</span>
			<span>ム</span>
			<span>mu</span>
		</li>
		<li id="me">
			<span>め</span>
			<span>メ</span>
			<span>me</span>
		</li>
		<li id="mo" class="radius-bottom">
			<span>も</span>
			<span>モ</span>
			<span>mo</span>
		</li>
<!--第八行-->
		<li class="null-li"></li>
		<li id="ya" class="radius-top">
			<span>や</span>
			<span>ヤ</span>
			<span>ya</span>
		</li>
		<li id="yu">
			<span>ゆ</span>
			<span>ユ</span>
			<span>yu</span>
		</li>
		<li id="yo" class="radius-bottom">
			<span>よ</span>
			<span>ヨ</span>
			<span>yo</span>
		</li>
<!--第九行-->
		<li class="null-li"></li>
		<li id="ra" class="radius-top">
			<span>ら</span>
			<span>ラ</span>
			<span>ra</span>
		</li>
		<li id="ri">
			<span>り</span>
			<span>リ</span>
			<span>ri</span>
		</li>
		<li id="ru">
			<span>る</span>
			<span>ル</span>
			<span>ru</span>
		</li>
		<li id="re">
			<span>れ</span>
			<span>レ</span>
			<span>re</span>
		</li>
		<li id="ro" class="radius-bottom">
			<span>ろ</span>
			<span>ロ</span>
			<span>ro</span>
		</li>
<!--第十行-->
		<li class="null-li"></li>
		<li id="wa" class="radius-top">
			<span>わ</span>
			<span>ワ</span>
			<span>wa</span>
		</li>
		<li id="wo" class="radius-bottom">
			<span>を</span>
			<span>ヲ</span>
			<span>wo</span>
		</li>
<!--第十一行-->
		<li class="null-li"></li>
		<li id="n" class="radius-all">
			<span>ん</span>
			<span>ン</span>
			<span>n</span>
		</li>
<!--
Todo：
	1.加入浊音和拗音
	2.通过jq切换排版？
		清音、浊音和拗音分成三个ul，移动端显示为一列，桌面端同时显示三列？
-->
	</ul>
<!--Aplayer-->
	<script src="js/release/APlayer.min.js"></script>
<!--Aplayer配置-->
	<script src="js/aplayerConfig.js"></script>
<!--JQ-->
	<script src="js/release/jquery-2.0.3.min.js"></script>
<!--实现点击播放-->
	<script src="js/release/play-dist.js"></script>
</body>
</html>
